<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <!--搜索结果页面-->
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>公交系统</title>
    <!-- 图标 -->
    <link rel="shortcut icon" href="../static/web/images/favicon.ico" th:href="@{/web/images/favicon.ico}" type="image/x-icon" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../static/web/css/bootstrap.min.css" th:href="@{/web/css/bootstrap.min.css}">
    <!--  CSS -->
    <link rel="stylesheet" href="../static/web/style.css" th:href="@{/web/style.css}">
    <!-- 颜色 CSS -->
    <link rel="stylesheet" href="../static/web/css/colors.css" th:href="@{/web/css/colors.css}">
    <!-- ALL VERSION CSS -->
    <link rel="stylesheet" href="../static/web/css/versions.css" th:href="@{/web/css/versions.css}">
    <!-- 响应式 CSS -->
    <link rel="stylesheet" href="../static/web/css/responsive.css" th:href="@{/web/css/responsive.css}">
    <!-- 自定义 CSS -->
    <link rel="stylesheet" href="../static/web/css/custom.css" th:href="@{/web/css/custom.css}">
    <!-- Modernizer for Portfolio -->
    <script src="../static/web/js/modernizer.js" th:src="@{/web/js/modernizer.js}"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}">
    <style>
        #gallery{
            padding: 0;
            background: url("/web/images/511.jpg") no-repeat;
            background-size: 100% 100%;
            width: 50%;
            min-height: 300px;
            margin: 0 auto;
        }
        #da-thumbs>div{
            height: 35px;
            line-height: 35px;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
            /*background: #00F7DE;*/
            border-radius: 5px;
            padding-left: 10px;
            background: linear-gradient(to right, #484747 50%, #0c865c 50%);
        }
    </style>
</head>
<body class="realestate_version">
<!-- 网站进行动画图片 -->
<div id="preloader">
    <img class="preloader" src="../static/web/images/loaders/loader-realestate.gif" th:src="@{/web/images/loaders/loader-realestate.gif}" alt="">
</div>
<!-- 导航 -->
<header class="header header_style_01">
    <nav class="megamenu navbar navbar-default" data-spy="affix">
        <div class="container-fluid">
            <div class="navbar-header">
                <!--手机端导航展开控制按钮-->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <!--手机端导航图标-->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" ><img src="../static/web/images/logos/logo.png" th:Src="@{/web/images/logos/logo.png}" width="220" alt="image" style="height:100%" /></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <block th:if="${session.user}" >
                        <li class="layui-nav-item layuimini-setting" style="color: #fff;">
                            <input type="hidden" th:value="${session.user.id}" id="userId">
                            感谢：
                            <a href="javascript:;" th:text="${session.user.nickname}" id="xlmenu" style="color: #fff;font-size: 16px;font-style: normal;text-transform:capitalize "></a>
                            您的登录。
                        </li>
                        <block th:if="${session.user.type==true}">
                            <li class="layui-nav-item layuimini-setting">
                                <a href="javascript:;" th:href="@{/view/goAdminIndex}"  style="color: #fff;font-size: 16px;font-style: normal;text-transform:capitalize ">进入后台</a>
                            </li>
                        </block>
                    </block>
                    <li><a data-scroll href="" th:href="@{/}">首页</a></li>
                    <li><a data-scroll href="" th:href="@{/vehicle}">公交信息<span class="hidden-xs">*</span></a></li>
                    <li><a data-scroll href="" th:href="@{/view/goLogin}">登录</a></li>

                </ul>
            </div>
        </div>
    </nav>
</header>
<div id="home" class="parallax first-section" data-stellar-background-ratio="0.4" style="background-image:url('/web/uploads/parallax.jpg');">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="big-tagline clearfix">
                    <h2>公交系统</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<!--小三角-->
<div class="sep1"></div>
<!--公交信息部分-->
<div id="gallery" class="section wb">
    <div class="sep2"></div>
    <div style="background: rgba(255,255,255,.8);height:100%;padding: 60px 0">
        <div class="container" style="width: 100%">
            <div class="section-title row text-center">
                <div class="col-md-8 col-md-offset-2">
                    <h3>公交信息</h3>
                </div>
            </div>
            <div id="da-thumbs" class="col-md-8 col-md-offset-2">
                <div  th:each="item:${session.list}" style="" th:style="'background: linear-gradient(to right, #484747 '+${session.stationNum*10}+'%, #0c865c '+${session.stationNum*10}+'%)'">
                    <a href="" th:href="@{/getVehicle/}+${item.id}">
                        <div style="color: #fff;font-size: 14px">
                            <p th:if="${session.stationNum != 0}">
                                <span  th:text="${item.name}">asd</span>号公交车->
                                距离<span  th:text="${session.siteName}">asd</span>还剩
                                <span  th:text="${session.stationNum}">asd</span>站->
                                距离下一班车还剩<span  th:text="${session.minute}">asd</span>分钟</p>
                            <p th:if="${session.stationNum == 0}">
                                <span  th:text="${item.name}">asd</span>号公交车->当前为始发站距离发车还剩<span  th:text="${session.minute}">asd</span>分钟</p>
                            </p>
                        </div>
                    </a>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- 底部 -->
<div class="copyrights">
    <div class="container">
        <div class="footer-distributed">
            <div class="footer-left">
                <p class="footer-links">
                    <a href="#" th:href="@{/}">首页</a>
                    <a href="#" th:href="@{/vehicle}">公交信息</a>
                </p>
                <p class="footer-company-name"></p>
            </div>

        </div>
    </div>
</div>
<a href="#home" data-scroll class="dmtop global-radius"><i class="fa fa-angle-up"></i></a>
<script src="../static/web/js/all.js" th:src="@{/web/js/all.js}"></script>
<script src="../static/web/js/custom.js"  th:src="@{/web/js/custom.js}"></script>
<script src="../static/web/js/portfolio.js"  th:src="@{/web/js/portfolio.js}"></script>
<script src="../static/web/js/hoverdir.js"  th:src="@{/web/js/hoverdir.js}"></script>

<script src="../static/layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script>
    layui.use(['layer', 'form','dropdown'], function(){
        var layer = layui.layer
            ,form = layui.form;
        var dropdown = layui.dropdown;
        var $ = layui.jquery;

        /*个人信息弹出层*/
        var setTop=function (url) {
            var that = this;
            //多窗口模式，层叠置顶
            layer.open({
                type: 2 //此处以iframe举例
                ,
                title: '个人信息'
                ,
                area: [$(window).height()*0.8+'px', $(window).width()*0.4 +'px']
                ,
                shade: 0
                ,
                maxmin: true
                ,
                offset: '100px'
                ,
                content:[url, 'no']
                ,

                yes: function () {
                    $(that).click();
                }
                ,
                btn2: function () {
                    layer.closeAll();
                }
                ,
                zIndex: layer.zIndex //重点1
                ,
                success: function (layero, index) {
                    layer.setTop(layero); //重点2. 保持选中窗口置顶
                    //记录索引，以便按 esc 键关闭。事件见代码最末尾处。
                    layer.escIndex = layer.escIndex || [];
                    layer.escIndex.unshift(index);
                    //选中当前层时，将当前层索引放置在首位
                    layero.on('mousedown', function () {
                        var _index = layer.escIndex.indexOf(index);
                        if (_index !== -1) {
                            layer.escIndex.splice(_index, 1); //删除原有索引
                        }
                        layer.escIndex.unshift(index); //将索引插入到数组首位
                    });
                }
                ,
                end: function () {
                    //更新索引
                    if (typeof layer.escIndex === 'object') {
                        layer.escIndex.splice(0, 1);
                    }
                }
            });
        }

        /*下拉菜单*/
        dropdown.render({
            elem: '#xlmenu' //可绑定在任意元素中，此处以上述按钮为例
            ,data: [
                {
                    title: '个人信息'
                    ,id: 1
                    ,href: '#'
                },
                {
                    title: '退出登录'
                    ,id: 101
                    ,href: '/login/logout' //开启超链接
                }
            ]
            ,id: 'demo1'
            //菜单被点击的事件
            ,click: function(obj){
                /*弹出个人信息弹窗*/
                if (obj.id===1) {
                    var id=$("#userId").val();
                    var url='/goUser/'+id;
                    console.log($(window).height())
                    setTop(url)
                }
            }
        });
    });

</script>
</body>
</html>
